<template>

  <div v-if="support">
    <el-row :gutter="50">
      <el-col :span="15"
              style="padding-left:10px;margin:0px">
        <h3 style="padding:0px;margin:0px">动态</h3>
        <ul v-infinite-scroll="load"
            style="height:550px">
          <li v-for="(i,index) in recent"
              :key="index">
            <dynamic :detail=i
                     @showcomment="showcomment"></dynamic>
            <div align="right">
              <br>
            </div>
          </li>
        </ul>
      </el-col>
      <el-col :span="6">
        <h3 style="padding:0px;margin:0px">评论</h3>
        <el-scrollbar>
          <ul>
            <li v-for="(i,index) in aggree"
                style="list-style-type:none;"
                :key="index">
              <comment v-if="refresh"
                       :comment=i></comment>
            </li>
          </ul>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '../../../axios_config'
import dynamic from './dynamic/joindynamic'
import comment from './dynamic/joincomment'

export default {
  data () {
    return {
      recent: {},
      aggree: 0,
      refresh: true,        //强制刷新子组件
      support: false
    }
  },
  methods: {
    findDynamic () {
      http.get("http://192.168.11.18:8080/recent/selectUserRecent")
        .then(res => {
          console.log(res.data);
          this.recent = res.data.data;
          this.support = true;
        });
    }, //继续加载
    load () {


    },
    //显示评论
    showcomment (comment) {
      console.log(comment.data);
      this.aggree = comment.data;
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
    }
  },

  mounted () {
    this.findDynamic();
  },

  components: {
    dynamic,
    comment
  }
}
</script>

<style scoped>
</style>